 <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>烟花效果</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background:black;
				overflow:hidden;
			}
			.firefix{
				position:absolute;
				width:10px;
				height:30px;
				border-radius:50%;
				background:red;
				border:3px double red ;
			}
			.fires{
				width:8px;
				height:8px;
				position:absolute;
				border-radius:50%;
				background:red;
			}
		</style>
	</head>
	<body>
		<script>
			var nowTime=new Date();
			document.onclick =function(e){
				var e=event||window.event;
				var x=e.clientX;
			    var y=e.clientY;
			    var h=window.innerHeight;
			    if(new Date()-nowTime>1000){
			    	fix(x,y,h);
			    	nowTime=new Date();
			    }   
			}
			function fix(x,y,h){
				var f=document.createElement("firefix");
				f.className="firefix";
				f.style.left=x+"px";
				f.style.top=h+"px";
				f.style.backgroundColor=color1();
				document.body.appendChild(f);
				var speed=10;
				var timer=setInterval(function (){
					f.style.top=f.offsetTop-10+"px";
					if(f.offsetTop<y){
						clearInterval(timer);
						document.body.removeChild(f);
						ceateFires(x,y,h);
					}
				},1000/60);
			}
			function ceateFires(x,y,h){
				var n=Math.ceil(Math.random()*50)+50;
				var fires=[];
				for(var i=0;i<n;i++){
					fires[i]=document.createElement("div");
					fires[i].className="fires";
					fires[i].style.left=x+"px";
					fires[i].style.top=y+"px";
					fires[i].style.backgroundColor=color1();
					fires[i].speedX=Math.ceil(Math.random()*60)-30;
					fires[i].speedY=Math.ceil(Math.random()*60)-30;
					document.body.appendChild(fires[i]);
				}
				setInterval(function(){
					for(var i=0;i<n;i++){
						if(!fires[i]){
							continue
						}
						fires[i].style.left=fires[i].offsetLeft+fires[i].speedX+"px";
						fires[i].style.top=fires[i].offsetTop+fires[i].speedY+"px";
						fires[i].speedY=fires[i].speedY+1;
						if(parseInt(fires[i].offsetLeft)<0||fires[i].offsetLeft>document.body.offsetWidth||fires[i].offsetTop>h){
						   document.body.removeChild(fires[i]);
						   fires[i]=null; 
				       }
					}

				},1000/60);

			}
			//生成随机颜色 rgb();
			function color1(){
				var r=Math.ceil(Math.random()*255);
				var g=Math.ceil(Math.random()*255);
				var b=Math.ceil(Math.random()*255);
				return "rgb("+r+","+g+","+b+")";
			}
			//生成随机颜色十六进制方法
			function color2(){
				return "#"+(function(color){
					console.log(color);

				}(Math.ceil(Math.random()*10000000).toString(16)))
			}
			color2();

			
		</script>
			
	</body>
</html>